<template>
  <div class="monthPlanAdd">
    <b-table
      ref="table"
      :out-loading="loading"
      :columns="columns"
      :scroll="{ x: 1300 }"
      :request="loadData"
      :export-config="{ use: true,select: '推荐供应商信息',all: '推荐供应商信息'}"
    >
      <template
        v-if="state !== 3"
        slot="prefix"
        slot-scope="ref"
      >
        <a-button
          type="primary"
          @click="openDialog"
        >
          添加行
        </a-button>
        <a-button @click="ref.delete(delFuc)">
          删除行
        </a-button>
      </template>

      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <template
        v-for="col in ['remark']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <template v-if="index === editingIndex">
          <BaseInput
            :key="col"
            v-model="record[col]"
          />
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template
        slot="operation"
        slot-scope="text, record, index"
      >
        <div class="editable-row-operations">
          <span v-if="index === editingIndex">
            <a @click="save(record)">保存</a>
            <a @click="cancel(record)">取消</a>
          </span>
          <span v-else>
            <a
              :disabled="editingIndex !== null || state === 3"
              @click="editingIndex = index"
            >编辑</a>
          </span>
        </div>
      </template>
    </b-table>
    <supplier-list
      ref="detailDialog"
      @createList="createList"
    />
  </div>
</template>
<script>
import { supplierList, supplierAdd, supplierEdit, supplierDel } from '@/api/material/procurement/apply'
import { columns } from './insideModel'
import { planDetailEdit } from '@/api/material/procurement/plan'

export default {
	name:'a'+Date.now(),
    props: {
        state: {
            type: Number
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            loading: false,
            queryParam: {},
            columns: columns.filter(item => this.state !== 3 || this.state === 3 && item.dataIndex !== 'operation'), // 查看时过滤掉操作列
            loadData: params => supplierList(Object.assign(params, this.queryParam, { purchaseApplyId: this.id })),
            delFuc: supplierDel,
            editingIndex: null,
            checkKeys: new Map()
        }
    },
    directives: {
        check: {
            inserted(el, binding, vNode) {
                if (vNode.context.rules[binding.value]) {
                    let rule = vNode.context.rules[binding.value]
                    vNode.context.checkKeys.set(binding.value, rule.message)
                }
            }
        }
    },
    mounted() {
        if (this.state === 3) {
            this.editingIndex = null
        }
    },
    methods: {
        async createList(selectRow) {
            let params = {
                name: selectRow.name,
                code: selectRow.code,
                people: selectRow.contacts,
                phone: selectRow.phone,
                remark: '',
                supplierId: selectRow.id,
                purchaseApplyId: this.id
            }
            this.loading = true
            let res = await supplierAdd(params)
            this.loading = false
            if (res.code === 200) {
                this.cancel()
            }
        },
        openDialog() {
            if (this.editingIndex !== null) {
                this.$noticeWarning('新增前请结束当前操作行')
                return
            }
            this.$refs.detailDialog.open()
        },
        async save(row) {
            try {
                this.checkKeys.forEach((value, key) => {
                    if (this.$isEmpty(row[key])) throw new Error(value)
                })
                this.loading = true
                let res = await supplierEdit(row)
                if (res.code === this.SUCCESS_CODE) {
                    this.$noticeSuccess('编辑成功')
                    this.cancel()
                }
                this.loading = false
            } catch (e) {
                this.$noticeWarning(e.message)
            }
        },
        cancel() {
            this.editingIndex = null
            this.$refs.table.getData(null, true)
        }
    }
}
</script>
